
<style lang="less" scoped>
@import "../assets/less/base/flex.less";
@import "../assets/less/libs/zTreeStyle.css";
.entrance {
  &-box {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }
  &-tree {
    color: #ccc;
    width: 680px;
    height: 95vh;
    overflow-y: scroll;
    border: 1px solid #ccc;
    box-sizing: border-box;
  }
  &-btn {
    margin-left: 16px;
    height: 95vh;
    display: flex;
    align-items: flex-end;
  }
}
</style>
<template>
  <div class="entrance-box">
    <div class="entrance-tree">
      <ul id="tree" class="ztree"></ul>
    </div>
    <div class="entrance-btn">
      <el-button type="primary" @click="getchecknodes()">保 存</el-button>
    </div>
  </div>
</template>

<script>
import common from '@mixins/common.js';
import Axios from "axios";
// z-tree
import "../assets/js/libs/jquery.ztree.core.min.js";
import "../assets/js/libs/jquery.ztree.excheck.min.js";
export default {
  mixins: [common],
  data() {
    return {
      zNodes: []
    };
  },
  mounted() {
    this.getTreeData();
  },
  computed: {},
  methods: {
    getTreeData() {
      let _this = this;
      Axios.get("pomplog/menuList.do")
        .then(function(res) {
          var treeNode = [];
          if (res.data.data && res.data.data.length > 0) {
            treeNode = [
              {
                id: null,
                name: "POMP系统菜单"
              },
              ...res.data.data
            ];
          }
          _this.zNodes = treeNode;
          // _this.zNodes = [
          //   { id: 1, pId: 0, name: "test1" },
          //   { id: 11, pId: 1, name: "test11" },
          //   { id: 12, pId: 1, name: "test12" },
          //   { id: 111, pId: 11, name: "test111" }
          // ];
          _this.createTree();
        })
        .catch(function(err) {});
    },
    createTree() {
      let _this = this;
      let _zTree;
      let setting = {
        check: {
          enable: true,
          chkStyle: "checkbox",
          chkboxType: { Y: "s", N: "s" }
        },
        data: {
          simpleData: {
            enable: true,
            pIdKey: "parentId",
            idKey: "id"
          },
          key: {
            checked: "recordLog"
          }
        }
      };
      //初始化
      $.fn.zTree.init($("#tree"), setting, _this.zNodes);
      _zTree = $.fn.zTree.getZTreeObj("tree");
      _zTree.expandAll(true);
    },
    getchecknodes() {
      let _this = this;
      let _checknodes = [];
      let _zTree = $.fn.zTree.getZTreeObj("tree");
      let _nodes = _zTree.getCheckedNodes();
      _nodes.forEach(element => {
        if (element.id || element.id == 0) {
          _checknodes.push(element.id);
        }
      });
      console.log(_checknodes);

      Axios.post("pomplog/updateMenuLogStatus.do", _checknodes)
        .then(function(res) {
          console.log(res);
          _this.showToast('保存成功！', 1)
        })
        .catch(function(err) {});
    }
  }
};
</script>
